<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>react</title>
<script src="../../s/react/16.13.1/react.production.min.js"></script>
<script src="../../s/react/16.13.1/react-dom.production.min.js"></script>
<script src="../../s/babel/5.8.38/browser.min.js"></script>
</head>
<body>
	<div id="root"></div>
	<script type="text/babel">
		// React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。
		function LoginButton(props) {
			return (
				<button onClick={props.onClick}>
					Login
				</button>
			);
		}
		function LogoutButton(props) {
			return (
				<button onClick={props.onClick}>
					Logout
				</button>
			);
		}
		function UserGreeting(props) {
			return <h1>Welcome back!</h1>;
		}
		function GuestGreeting(props) {
			return <h1>Please sign up.</h1>;
		}
		function Greeting(props) {
			const isLoggedIn = props.isLoggedIn;
			if (isLoggedIn) {
				return <UserGreeting />;
			}
			return <GuestGreeting />;
		}
		class LoginControl extends React.Component {
			constructor(props) {
				super(props);
				this.handleLoginClick = this.handleLoginClick.bind(this);
				this.handleLogoutClick = this.handleLogoutClick.bind(this);
				this.state = {isLoggedIn: false};
			}
			handleLoginClick() {
				this.setState({isLoggedIn: true});
			}
			handleLogoutClick() {
				this.setState({isLoggedIn: false});
			}
			render() {
				const isLoggedIn = this.state.isLoggedIn;
				let button;
				if (isLoggedIn) {
					button = <LogoutButton onClick={this.handleLogoutClick} />;
				} else {
					button = <LoginButton onClick={this.handleLoginClick} />;
				}
				return (
					<div>
						<Greeting isLoggedIn={isLoggedIn} />
						{button}
					</div>
				);
			}
		}
		ReactDOM.render(
			<LoginControl />,
			document.getElementById('root')
		);
    </script>
</body>
</html>